<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box}

        .all{
            width: 100%;
            height: 600px;
            background-color: black;

        }
        .all>div{
            width: 100%;
            height: 100%;
        }
        .all>div>.nav{
            width: 100%;
            height: 100px;
            /*定位这个元素，增大他的层级*/
            position: absolute;
            z-index: 999;
        }
        .all>div>.nav>div{
            width: 100%;
            height: 100%;
        }
      .all>div>.nav>div>ul>li{
          list-style: none;
          float: left;
          color: white;
          padding-left: 20px;
      }
        .all>div>.bg{
            width: 100%;
            height: 400px;
            background-color: red;
            transition: all 1s;
            /*往下移动.nav的高度*/
            position: relative;
            top: 100px;
        }
        .all>div>.nav>div>ul>li:hover{
            color: red;
        }
        .all>div>.nav:hover+.bg{
            transform: translateY(-100px);

        }

    </style>
</head>
<body>
<div class="all">
    <div>
        <div class="nav">
            <div >
                <ul>
                    <li style="z-index:999">1</li>
                    <li style="z-index:999">2</li>
                    <li style="z-index:999">3</li>
                </ul>
            </div>
        </div>
        <div class="bg"></div>
    </div>

</div>
</body>
</html>